<template>
    <div class="chart-wrapper">
        <Title :title="title"></Title>

        <div class="tip">
            <i class="icon">ℹ️</i>
            <span class="tip-text">点击图例可隐藏/显示对应指标</span>
        </div>

        <div ref="right1" class="chart-container"></div>
    </div>
</template>
<script>
import { DualAxes } from '@antv/g2plot';
import { get } from '@/utils/request';
import moment from 'moment';
import { mapState } from 'vuex';

export default {
    data() {
        return {
            title: '监测点多指标环境曲线', // 修改标题，体现多指标
            params: {
                page: 1,
                pageSize: 100
            },
            pointData: [], // 存放所有指标数据
            dualAxes: null,
            // 2. 新增：指标配置（统一管理，便于维护）
            indicatorConfig: [
                { key: 'pm10', name: 'PM10', color: '#FF7A45', yAxisIndex: 0 }, // 左Y轴
                { key: 'pm25', name: 'PM25', color: '#FF4D4F', yAxisIndex: 0 }, // 左Y轴（与PM10同轴，单位一致）
                { key: 'temperature', name: '温度', color: '#FF9F43', yAxisIndex: 1 }, // 右Y轴
                { key: 'humidity', name: '湿度', color: '#1890FF', yAxisIndex: 1 }, // 右Y轴
                { key: 'windSpeed', name: '风速', color: '#52C41A', yAxisIndex: 1 } // 右Y轴
            ]
        }
    },

    computed: {
        ...mapState(['ed'])
    },

    watch: {
        ed: {
            handler(n) {
                if (n?.device_id) { // 增加字段校验，避免无效请求
                    this.params.engineer_id = n.engineer_id;
                    this.params.device_id = n.device_id;
                    this.getPointData().then(() => {
                        // 数据更新后重新渲染图表（确保数据已获取）
                        if (this.dualAxes) {
                            this.dualAxes.changeData(this.getChartDataList());
                        }
                    });
                }
            },
            deep: true,
            immediate: true
        }
    },

    methods: {
        // 3. 新增：生成图表所需的多系列数据
        getChartDataList() {
            // 按指标配置，生成每个指标的独立数据系列
            return this.indicatorConfig.map(indicator => {
                return this.pointData.map(item => ({
                    insert_time: item.insert_time, // 共用X轴（时间）
                    [indicator.key]: item[indicator.key] // 每个系列只包含当前指标的数值
                }));
            });
        },

        // 4. 新增：生成Y轴配置（左轴：PM类，右轴：环境类）
        getYAxisConfig() {
            return [
                // 左Y轴：PM10/PM25（单位：μg/m³）
                {
                    name: '颗粒物浓度 (μg/m³)',
                    label: { style: { fill: "white", fontSize: 12 } },
                    // 新增：PM国家标准阈值线（PM10:150μg/m³，PM25:75μg/m³）
                    annotations: [
                        {
                            type: 'line',
                            start: ['min', 75], // PM25超标线
                            end: ['max', 75],
                            style: { stroke: '#FF4D4F', lineDash: [4, 4], lineWidth: 1.5, opacity: 0.8 },
                            text: { content: 'PM25超标线', style: { fill: '#FF4D4F', fontSize: 10 } }
                        },
                        {
                            type: 'line',
                            start: ['min', 150], // PM10超标线
                            end: ['max', 150],
                            style: { stroke: '#FF7A45', lineDash: [4, 4], lineWidth: 1.5, opacity: 0.8 },
                            text: { content: 'PM10超标线', style: { fill: '#FF7A45', fontSize: 10 } }
                        }
                    ]
                },
                // 右Y轴：温度（℃）、湿度（%）、风速（m/s）
                {
                    name: '环境指标（℃/%/m/s）',
                    label: { style: { fill: "white", fontSize: 12 } },
                    // 新增：温度/湿度合理范围参考线
                    annotations: [
                        {
                            type: 'line',
                            start: ['min', 25], // 舒适温度参考
                            end: ['max', 25],
                            style: { stroke: '#FF9F43', lineDash: [2, 2], lineWidth: 1, opacity: 0.6 },
                            text: { content: '舒适温度', style: { fill: '#FF9F43', fontSize: 10 } }
                        },
                        {
                            type: 'line',
                            start: ['min', 60], // 舒适湿度参考
                            end: ['max', 60],
                            style: { stroke: '#1890FF', lineDash: [2, 2], lineWidth: 1, opacity: 0.6 },
                            text: { content: '舒适湿度', style: { fill: '#1890FF', fontSize: 10 } }
                        }
                    ]
                }
            ];
        },

        // 加载双轴折线图（整合新增配置）
        loadDualAxes() {
            // 销毁旧实例，避免冲突
            if (this.dualAxes) {
                this.dualAxes.destroy();
            }

            this.dualAxes = new DualAxes(this.$refs.right1, {
                data: this.getChartDataList(), // 多系列数据
                xField: 'insert_time',
                yField: this.indicatorConfig.map(i => i.key), // 所有指标的key
                yAxis: this.getYAxisConfig(), // 双Y轴配置（含阈值线）
                // 每个指标的线条样式（从配置中读取）
                geometryOptions: this.indicatorConfig.map(indicator => ({
                    geometry: 'line',
                    color: indicator.color,
                    name: indicator.name,
                    lineStyle: { lineWidth: 2 }, // 统一线条宽度，更清晰
                    point: { size: 4, fill: 'white', stroke: indicator.color } // 数据点样式（突出显示）
                })),
                // X轴配置优化：避免时间标签重叠
                xAxis: {
                    label: {
                        rotate: -45,
                        style: { fill: "white", fontSize: 12 },
                        autoHide: true // 自动隐藏重叠标签
                    },
                    line: { style: { stroke: 'rgba(255,255,255,0.2)' } }
                },
                // 5. 新增：图例筛选功能（点击隐藏/显示曲线）
                legend: {
                    position: 'top',
                    textStyle: { fill: 'white', fontSize: 12 },
                    interactive: true, // 开启图例交互
                    clickable: true // 点击图例切换系列显示/隐藏
                },
                // 6. 新增：hover详情优化（显示所有指标的精确值）
                tooltip: {
                    formatter: (datum) => {
                        // 整理tooltip内容：时间 + 所有指标的数值（带单位）
                        const base = [{ name: '时间', value: datum.insert_time }];
                        const indicators = this.indicatorConfig.map(indicator => {
                            // 根据指标类型添加单位
                            const unit = indicator.key.includes('pm') ? 'μg/m³' : 
                                         indicator.key === 'temperature' ? '℃' : 
                                         indicator.key === 'humidity' ? '%' : 'm/s';
                            return {
                                name: indicator.name,
                                value: `${datum[indicator.key] || 0} ${unit}`,
                                color: indicator.color // 与线条颜色一致
                            };
                        });
                        return [...base, ...indicators];
                    },
                    domStyles: {
                        'g2-tooltip': {
                            backgroundColor: 'rgba(10,30,60,0.9)',
                            borderColor: '#1890FF',
                            color: 'white',
                            fontSize: 12
                        }
                    }
                },
                // 7. 新增：网格线优化（辅助读数，不干扰主视觉）
                grid: {
                    horizontal: { style: { stroke: 'rgba(255,255,255,0.1)' } },
                    vertical: { style: { stroke: 'rgba(255,255,255,0.05)' } }
                }
            });

            this.dualAxes.render();
        },

        // 获取监测点数据（扩展指标字段，增加空数据兜底）
        async getPointData() {
            try {
                const res = await get('/dashboard/pageQueryTodayData', this.params);
                console.log('多指标数据响应:', res);

                // 接口异常兜底
                if (res?.status !== 200 || !Array.isArray(res.data?.list)) {
                    console.error('接口数据异常，使用默认数据');
                    this.pointData = this.getDefaultData();
                    return;
                }

                const temp = [];
                res.data.list.forEach((item, index, arr) => {
                    // 初始化第一条数据（避免接口返回值异常）
                    if (index === 0) {
                        arr[0].pm10 = arr[0].pm10 || 50;
                        arr[0].pm25 = arr[0].pm25 || 35;
                        arr[0].temperature = arr[0].temperature || 25;
                        arr[0].humidity = arr[0].humidity || 60;
                        arr[0].windSpeed = arr[0].windSpeed || 2;
                    }

                    // 格式化时间 + 筛选有效字段
                    temp.push({
                        insert_time: moment(item.insert_time).format("HH:mm"),
                        pm10: Number(item.pm10) || 0,
                        pm25: Number(item.pm25) || 0,
                        temperature: Number(item.temperature) || 0,
                        humidity: Number(item.humidity) || 0,
                        windSpeed: Number(item.windSpeed) || 0
                    });
                });

                // 间隔取数（避免数据过密，每8条取1条）
                this.pointData = temp.filter((_, index) => index % 8 === 0);
            } catch (err) {
                console.error('获取数据失败:', err);
                this.pointData = this.getDefaultData(); // 异常时用默认数据
            }
        },

        // 8. 新增：默认数据（接口异常时兜底）
        getDefaultData() {
            return Array.from({ length: 10 }, (_, i) => {
                const hour = 8 + i; // 时间从8:00开始
                return {
                    insert_time: `${hour}:00`,
                    pm10: 40 + Math.random() * 30, // PM10: 40-70μg/m³
                    pm25: 25 + Math.random() * 20, // PM25: 25-45μg/m³
                    temperature: 22 + Math.random() * 6, // 温度:22-28℃
                    humidity: 50 + Math.random() * 20, // 湿度:50-70%
                    windSpeed: 1 + Math.random() * 3 // 风速:1-4m/s
                };
            });
        }
    },

    async mounted() {
        // 确保DOM挂载后再初始化
        await this.$nextTick();
        await this.getPointData();
        this.loadDualAxes();
    },

    beforeDestroy() {
        if (this.dualAxes) {
            this.dualAxes.destroy();
        }
    }
}
</script>
<style lang="less" scoped>
.chart-wrapper {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: rgba(10, 30, 60, 0.3); // 适配大屏深色背景
}

.chart-container {
    height: 150px;
    margin-top: 10px;
}

// 指标说明提示样式
.tip {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    margin-bottom: 5px;
}

.icon {
    font-style: normal;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>